import { useContext } from 'react';
import { PhoneOutlined  } from '@ant-design/icons';
import { ContentType } from '../../constants';
import { MySdkStoreContext } from '../../context';

import './style.scss';
import moment from 'moment';

const paddingZone = (number) => {
  return `${number}`.padStart(2, '0').substring(0,2);
}

const renderTimeDiff = ({ seconds, minutes, hours }) => {
  if (hours) {
    return `${paddingZone(hours)}:${paddingZone(minutes)}:${paddingZone(seconds)}`;
  } else {
    return `${paddingZone(minutes)}:${paddingZone(seconds)}`;
  }
}

export default function(props) {
  const { mockConfig } = useContext(MySdkStoreContext);
  const { rtcAction, invitedUserRejected, rtcRoomInfo } = props.msgContent || {};
  const { userName, nickName, userId } = props.from || {};

  const renderText = () => {
    const actionUserText = mockConfig.userId === userId ? '你' : '对方';
    if (invitedUserRejected) {
      return `${mockConfig.userId === userId ? '对方' : '你'}已拒绝`;
    }

    if (rtcRoomInfo && !rtcRoomInfo.closeTime) {
      return `${actionUserText}已挂断`;
    }
    // rtcAction "hangup" 已挂断
    if (rtcRoomInfo?.closeTime && rtcRoomInfo?.createTime) {
      const duration = moment.duration(rtcRoomInfo.closeTime - rtcRoomInfo.createTime);
      // @ts-ignore
      const { seconds, minutes, hours } = duration._data;
      return `通话时长 ${renderTimeDiff({ seconds, minutes, hours })}`;
    }

    if (rtcAction === 'invite') {
      return `${actionUserText}发起音视频邀请`;
    }

    if (rtcAction === 'receiveInvite') {
      return `收到${userName || userId}发起的音视频邀请`;
    }
  }

  return (<div className="rtcComponent">
    <PhoneOutlined style={{ marginRight: 8, fontSize: 16 }}/>
    {renderText()}
  </div>)
}
